<template>
	<div class="app-container">
		<el-card shadow="never" class="table-container">
			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item prop="keywords" label="组件名称">
					<el-input
						v-model="queryParams.keywords"
						placeholder="组件名称"
						clearable
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery">
						<i-ep-search />搜索
					</el-button>
					<el-button @click="resetQuery"><i-ep-refresh />重置</el-button>
					<el-button type="success" @click="openDialog()">
						<i-ep-plus />新增
					</el-button>
					<el-button
						type="danger"
						:disabled="ids.length === 0"
						@click="handleDelete()"
					>
						<i-ep-delete />删除
					</el-button>
				</el-form-item>
			</el-form>
			<el-table
				ref="dataTableRef"
				v-loading="loading"
				:data="roleList"
				highlight-current-row
				border
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="组件名称" prop="name" min-width="20%" />
				<el-table-column label="组件标签" prop="code" min-width="20%" />
				<el-table-column label="状态" align="center" min-width="20%">
					<template #default="scope">
						<el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
						<el-tag v-else type="info">禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					label="排序"
					align="center"
					min-width="20%"
					prop="sort"
				/>
				<el-table-column fixed="right" label="操作" min-width="20%">
					<template #default="scope">
						<el-button
							type="primary"
							size="small"
							link
							@click="openDialog(scope.row.id)"
						>
							<i-ep-edit />编辑
						</el-button>
						<el-button
							type="primary"
							size="small"
							link
							@click="handleDelete(scope.row.id)"
						>
							<i-ep-delete />删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<pagination
				v-if="total > 0"
				v-model:total="total"
				v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize"
				@pagination="handleQuery"
			/>
		</el-card>
	</div>
	<AddOrEdit ref="addOrEditRef" />
</template>

<script setup lang="ts">
import AddOrEdit from '@/components/VueComps/AddOrEdit.vue'
import RoleAPI from '@/api/role'
import { RolePageVO, RoleForm, RoleQuery } from '@/api/role/model'
import { getGitList } from '@/api/git'

const addOrEditRef = ref()

defineOptions({
	name: 'Role',
	inheritAttrs: false
})

const queryFormRef = ref(ElForm)

const loading = ref(false)
const ids = ref<number[]>([])
const total = ref(0)

const queryParams = reactive<RoleQuery>({
	pageNum: 1,
	pageSize: 10
})

const roleList = ref<RolePageVO[]>()

const dialog = reactive({
	title: '',
	visible: false
})

const formData = reactive<RoleForm>({
	sort: 1,
	status: 1,
	code: '',
	name: ''
})

/** 查询 */
function handleQuery() {
	roleList.value = [
		{ id: 123, name: '列表组件', code: 'sbd-table', status: 1, sort: 1 },
		{ id: 1234, name: '树形组件', code: 'sbd-tree', status: 1, sort: 2 },
		{ id: 1235, name: '数据字典', code: 'sbd-dict', status: 1, sort: 3 },
		{ id: 1236, name: '编码组件', code: 'sbd-code', status: 1, sort: 4 },
		{ id: 1237, name: '弹框组件', code: 'sbd-dialog', status: 1, sort: 5 }
	]
	getGitList().then(res => {
		console.log('res>>>>>>>>>>>>>>', res)
	})
	// loading.value = true
	// RoleAPI.getPage(queryParams)
	// 	.then(data => {
	// 		roleList.value = data.list
	// 		total.value = data.total
	// 	})
	// 	.finally(() => {
	// 		loading.value = false
	// 	})
}
/** 重置查询 */
function resetQuery() {
	queryFormRef.value.resetFields()
	queryParams.pageNum = 1
	handleQuery()
}

/** 行checkbox 选中事件 */
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: any) => item.id)
}

/** 打开角色表单弹窗 */
function openDialog(roleId?: number) {
	dialog.visible = true
	// if (roleId) {
	// 	dialog.title = '修改角色'
	// 	RoleAPI.getFormData(roleId).then(data => {
	// 		Object.assign(formData, data)
	// 	})
	// } else {
	// 	dialog.title = '新增角色'
	// }
	addOrEditRef.value?.openDialog()
}

/** 删除角色 */
function handleDelete(roleId?: number) {
	const roleIds = [roleId || ids.value].join(',')
	if (!roleIds) {
		ElMessage.warning('请勾选删除项')
		return
	}

	ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		loading.value = true
		RoleAPI.deleteByIds(roleIds)
			.then(() => {
				ElMessage.success('删除成功')
				resetQuery()
			})
			.finally(() => (loading.value = false))
	})
}

onMounted(() => {
	handleQuery()
})
</script>
